<template>
  <div class="advert-automatic-wrap">
    <a-tabs v-model:active-key="activeTab" size="mini">
      <a-tab-pane key="items" title="策略应用明细" />
      <a-tab-pane key="template" title="分时策略" />
    </a-tabs>
    <PolicyItems v-if="activeTab === 'items'" :markedtList="markedtList" :userList="userList" :shopList="shopList" />
    <PolicyTemplate v-if="activeTab === 'template'" :markedtList="markedtList" :userList="userList" :shopList="shopList" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { getShopMarketAll, findShopMarketByParam, getOrganizesUser } from '@/api/system'
  import PolicyItems from './policyItems.vue'
  import PolicyTemplate from './policyTemplate.vue'

  onMounted(async () => {
    getMarketList()
    getShopList()
    getUserList()
  })

  const userList = ref([])
  const markedtList = ref([])
  const shopList = ref([])
  const activeTab = ref('items')

  // 获取站点
  async function getMarketList() {
    const res: any = await getShopMarketAll()
    markedtList.value = res?.data?.map((el: any) => {
      return {
        label: el.marketplaceName,
        value: el.marketplaceId,
      }
    })
  }
  // 获取店铺
  async function getShopList() {
    const res: any = await findShopMarketByParam()
    shopList.value = res?.data?.map((el: any) => {
      return {
        label: el.shopName,
        value: el.id,
      }
    })
  }
  // 获取所有用户列表
  async function getUserList() {
    const res: any = await getOrganizesUser({
      pageNum: 1,
      pageSize: 1000,
    })
    userList.value = res?.data?.records?.map((el: any) => {
      return {
        label: el.userName,
        value: el.id,
      }
    })
  }
</script>
<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }
</style>
